<template>
    <div class="component-mine-bg">

        <div class="user-info">
            <!-- vip -->
            <template v-if="userData.user_info.is_vip === 1">

                <template v-if="userData.nickName">
                    <image class="user-avatar" :src="userData.avatarUrl" />

                    <div class="user-info-detail">
                        <div class="user-name">{{ userData.nickName }}
                            <image class="vip-logo" src="https://img.wlcod.com/novel/img/vip-logo.webp" />
                        </div>
                        <div class="vip-desc">会员有效期：{{ userData.user_info.viptime }}</div>
                        <div class="user-id">ID:{{ 10000000 + userData.user_info.id }}</div>
                    </div>
                </template>

                <template v-else-if="userData.user_info.id">
                    <image class="user-avatar" src="https://img.wlcod.com/novel/img/default-avatar.webp" />

                    <div class="user-info-detail">
                        <div class="user-name">{{ userData.user_info.nickname }}
                            <image class="vip-logo" src="https://img.wlcod.com/novel/img/vip-logo.webp" />
                            <image class="user-name-refresh" @tap="getUserProfile"
                                src="https://img.wlcod.com/novel/img/Switch_icon.png" />
                        </div>
                        <div class="vip-desc">会员有效期：{{ userData.user_info.viptime }}</div>
                        <div class="user-id">ID:{{ 10000000 + userData.user_info.id }}</div>
                    </div>
                </template>
            </template>

            <!-- 非 vip -->
            <template v-if="userData.user_info.is_vip === 0">
                <template v-if="userData.nickName">
                    <image class="user-avatar" :src="userData.avatarUrl" />

                    <div class="user-info-detail">
                        <div class="user-name">{{ userData.nickName }}</div>
                        <div class="vip-desc">全站内容畅读·免广告·专属标识</div>
                        <div class="user-id">ID:{{ 10000000 + userData.user_info.id }}</div>
                    </div>
                </template>

                <template v-else-if="userData.user_info.id">
                    <image class="user-avatar" src="https://img.wlcod.com/novel/img/default-avatar.webp" />

                    <div class="user-info-detail">
                        <div class="user-name">{{ userData.user_info.nickname }}
                            <image class="user-name-refresh" @tap="getUserProfile"
                                src="https://img.wlcod.com/novel/img/Switch_icon.png" />
                        </div>
                        <div class="vip-desc">全站内容畅读·免广告·专属标识</div>
                        <div class="user-id">ID:{{ 10000000 + userData.user_info.id }}</div>
                    </div>
                </template>
            </template>
        </div>

        <div class="vip-banner">
            <div class="vip-left">
                <image class="vip-icon" src="https://img.wlcod.com/novel/img/vip-logo.webp" />
                <div class="banner-content">
                    <image class="vip-banner-bg" src="https://img.wlcod.com/novel/img/vip-title.webp" />
                    <text class="vip-desc">免费畅读优质内容</text>
                </div>
            </div>
            <div class="vip-right" @click="goVipPage">
                {{ userData.user_info.is_vip === 0 ? '立即开通' : '立即续费' }}
                <image class="right-arrow" src="https://img.wlcod.com/novel/img/right-arrow1.webp" />
            </div>
        </div>

    </div>
</template>


<script>
export default {
    props: {
        userData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {

        }
    },
    methods: {
        getUserProfile() {
            tt.getUserProfile({
                success: ({ userInfo }) => {
                    this.$emit('getUserProfile', userInfo)
                }
            })
        },
        goVipPage() {
            uni.navigateTo({ url: '/pages/mine/vip' })
        }

    },
    mounted() {

    },
}
</script>

<style lang="less" scoped>
.component-mine-bg {
    background: url(https://img.wlcod.com/novel/img/mine-bg.webp) 0 0 no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 580rpx;
    position: relative;
    overflow: hidden;
}


.user-info {
    width: 686rpx;
    height: 184rpx;
    margin-top: 192rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    .user-avatar {
        width: 144rpx;
        height: 144rpx;
        margin: 32rpx 24rpx 0 32rpx;
        border-radius: 50%;
    }

    .user-name-noLogin {
        margin-top: 80rpx;
        height: 60rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #FFFFFF;
    }

    .user-name {
        margin-top: 32rpx;
        height: 60rpx;
        font-size: 44rpx;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: bold;

        .user-name-refresh {
            width: 34rpx;
            height: 28rpx;
            margin-left: 16rpx;
        }

        .vip-logo {
            width: 48rpx;
            height: 48rpx;
            margin-left: 16rpx;
        }

    }

    .vip-desc {
        font-size: 26rpx;
        color: #5C2B0B;
        margin-top: 6rpx;
    }


    .user-id {
        font-size: 26rpx;
        color: #7F7F7F;
        margin-top: 4rpx;
    }
}

.vip-banner {
    width: 686rpx;
    height: 156rpx;
    background: linear-gradient(95deg, #D9D9D9 0%, rgba(217, 217, 217, 0.97) 0%, rgba(217, 217, 217, 0.25) 0%, #FED375 0%, #FFE4A3 100%);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 44rpx auto 0;

    .vip-left {
        display: flex;
        justify-content: center;
        align-items: center;

        .vip-icon {
            width: 108rpx;
            height: 108rpx;
            margin-left: 40rpx;
        }

        .banner-content {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;

            .vip-banner-bg {
                width: 180rpx;
                height: 52rpx;
                margin-left: 24rpx;
            }

            .vip-desc {
                font-size: 24rpx;
                color: #5C2B0B;
                text-align: center;
                margin-left: 24rpx;
                margin-top: 12rpx;
            }
        }
    }

    .vip-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 190rpx;
        height: 60rpx;
        background: #FFF6E5;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        border: 2rpx solid #FFFFFF;
        font-weight: bold;
        font-size: 28rpx;
        color: #5C2B0B;
        text-align: center;
        margin-right: 40rpx;
        text-indent: 14rpx;

        .right-arrow {
            margin-left: 8rpx;
            width: 28rpx;
            height: 28rpx;
        }
    }
}
</style>